<template>
  <!-- 筛选条件  -->
  <div class="HandoverListBox">
    <!-- 输入框 -->
    <ul class="input">
      <li>
        <p>主运单号：</p>
        <input
          type="text"
          v-model="params.masterWaybillLike"
          placeholder="请输入主单号"
        />
      </li>
      <li>
        <p>发货单号：</p>
        <input
          type="text"
          v-model="params.deliverCargoNoLike"
          placeholder="请输入发货单号"
        />
      </li>
      <li>
        <p>装车服务：</p>
        <van-checkbox
          v-model="params.loadingService"
          icon-size="15px"
          checked-color="#F29D12"
          shape="square"
        ></van-checkbox>
      </li>
    </ul>
    <!-- 按钮 -->
    <div class="button">
      <van-row gutter="10">
        <van-col span="12">
          <van-button block @click="changeParams" class="buttonItem1" size="small" type="primary"
            >查询</van-button
          >
        </van-col>
        <van-col span="12">
          <van-button block @click="resetParams" class="buttonItem2" size="small" type="primary"
            >重置</van-button
          >
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Checkbox, CheckboxGroup, Col, Row } from "vant";

Vue.use(Col);
Vue.use(Row);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
export default {
  data() {
    return {
      params: {
        masterWaybillLike: "",
        deliverCargoNoLike: "",
        loadingService: false,
      },
    };
  },
  methods: {
    // 重置
    resetParams() {
      this.params = {
        masterWaybillLike: "",
        deliverCargoNoLike: "",
        loadingService: false,
      };
    },
    // 调用父元素改变参数
    changeParams() {
      this.$emit("changeParams", this.params);
    },
  },
};
</script>

<style lang="scss" scoped>
.HandoverListBox {
  margin-bottom: 15px;
  width: 100%;
  background-color: #fff;

  .input {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    padding: 10px 15px;
    box-sizing: border-box;

    li {
      display: flex;
      margin-bottom: 10px;

      p {
        width: 85px;
        font-size: 16px;
        font-weight: 400;
        color: #999999;
        line-height: 30px;
        margin: 0;
      }

      input {
        flex: 1;
        height: 30px;
        background: rgba(233, 236, 239, 0.5);
        border-radius: 18px;
        outline: none;
        border: none;
        box-sizing: border-box;
        padding: 0 10px;
        line-height: 30px;
        font-size: 16px;
        color: #79828a;
      }
      & > div {
        margin: 0;
        min-height: 30px;
        padding-left: 3px;
      }
    }
  }

  .button {
    width: 100%;
    padding: 0 15px 15px 85px;
    box-sizing: border-box;

    .buttonItem1 {
      background: #f29d12;
      border-radius: 18px;
      line-height: 35px;
      color: #fff;
      font-size: 16px;
      border: 2px solid #f29d12;
    }

    .buttonItem2 {
      background: #fff;
      border-radius: 18px;
      line-height: 35px;
      font-size: 16px;
      color: #333333;
      border: 2px solid #acb7bc;
    }
  }
}
</style>